<template>
  <div class="table-container">
    <div style="height: 35px;overflow: hidden;">
      <slot name="tableHeader"></slot>
    </div>
    <el-table :height="props.height || null" v-bind="$attrs" border v-loading="props.loading" :id="props.keyId">
      <template #empty>
        <slot name="empty" :tableData="props.tableData"></slot>
      </template>
      <template #append>
        <slot name="append" :tableData="props.tableData"></slot>
      </template>
      <el-table-column
        v-for="(column, index) in formattedColumns"
        align="center"
        :key="index"
        :prop="column.dataIndex"
        :label="column.title"
        :width="column.width"
        :align="column.align"
        :render-header="column.renderHeader"
      >
        <template #default="{ row }" v-if="column.renderText">
          <div v-html="column.renderText(row as DataSoureItem)"></div>
        </template>
      </el-table-column>
      <el-table-column v-bind="props.operateColProps" align="center" fixed="right" v-if="$slots.operate" label="操作">
        <template #default="scope">
          <slot name="operate" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: end;margin-top: 5px;" v-if="props.pagerInfo">
      <el-pagination
        :current-page="props.pagerInfo.pageNo"
        :page-size="props.pagerInfo.pageSize"
        @current-change="(current) => onChange(current, 'pageNo')"
        @size-change="(size) => onChange(size, 'pageSize')"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="props.pagerInfo.total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">


interface ColumnConfig {
    dataIndex?: string; // 数据字段名
    title: string; // 列标题
    width?: string | number; // 列宽
    align?: string; // 对齐方式，如 'left', 'center', 'right'
    renderHeader?: Function; // 表头渲染函数
    renderText?: Function; // 单元格渲染函数
}

interface Props {
    tableData: any[];
    columns: ColumnConfig[];
    loading: boolean;
    pagerInfo: any | false;
    keyId:string;
    operateColProps: any;
    height: number;
}

const height = ref(200)

const emit = defineEmits<{
  (e: 'onChange', payload: { type: any; data: number }): void
}
>();


const props = withDefaults(defineProps<Props>(), {
    operateColProps: { width: 120 },
    keyId:'',
    tableData: () => [],
});


type ElementType<T> = T extends (infer E)[] ? E : never;
type DataSoureItem  = ElementType<typeof props.tableData>

const onChange = (data: number, type: 'pageNo' | 'pageSize') => {
    emit('onChange', { type, data })
}

// 为了处理没有直接提供prop的列，我们可以创建一个计算属性来格式化columns
const formattedColumns = computed(() => {
    return props.columns.map(column => ({
        ...column,
        // 如果没有prop，但有render函数，确保prop为null而不是undefined，以避免警告
        prop: column.renderText ? null : column.dataIndex
    }));
});

onMounted(() => {
    height.value =  window.innerHeight - 260
    window.addEventListener('resize', () => {
        height.value = window.innerHeight - 260
    })
})


</script>

<style scoped lang="scss">
.table-container {
  :deep(.el-table__inner-wrapper) {
    height: calc(100vh - 266px);
  }
}
</style>
